<template>
	<view class="wrapper page-top-bg">
		<view id="header" class="header">
			<index-header></index-header>
		</view>
		<view class="container" :style="{paddingTop: `${paddingTop}px`}">
				<!--轮播图 -->
				<view class="banner">
					<swiper
						class="swiper"
						circular
						indicator-active-color="#e3230e"
						indicator-dots
						autoplay>
						<swiper-item v-for="item in bannerList" :key="item.id">
							<view class="swiper-item" @click="clickBanner(item)">
								<image class="swiper-item-img" mode="aspectFill" :src="item.img"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<!--通知-->
				<view class="notice" v-if="noticeData?.noticeTitle">
					<uni-notice-bar
						show-icon 
						scrollable
						background-color="#ffffff"
						color="#333333"
						@click="clickNotice"
						:text="noticeData.noticeTitle" />
				</view>
				
				<!--选择模式-->
				<view class="mode main-flex">
					<view class="mode-item" @click="changeMode(1)">
						<view class="mode-item-icon">
							<image class="mode-item-icon-img" mode="aspectFit" src="/static/images/home/mode1.png"></image>
						</view>
						<view class="mode-item-name">配送到家</view>
					</view>
					<view class="mode-item" @click="changeMode(2)">
						<view class="mode-item-icon">
							<image class="mode-item-icon-img" mode="aspectFit" src="/static/images/home/mode2.png"></image>
						</view>
						<view class="mode-item-name">门店自提</view>
					</view>
				</view>
				<view class="title">
					<u-divider text="廷与严选" textColor="#333333" lineColor="#c8c7cc"></u-divider>
				</view>
				<view class="goods">
					<u-waterfall v-model="productList" columns="3">
						<template v-slot:column="{colList, colIndex}">
							<view class="goods-box" v-for="(item, index) in colList" :key="index">
								<goods-item @chooseGoods="chooseGoods" :goods="item"></goods-item>
							</view>
						</template>
					</u-waterfall>
				</view>
				
				<!--加载-->
				<view
					v-if="isNull"
					class="null main-flex">
					<u-empty text="商品为空" icon="/static/images/null.png"></u-empty>
				</view>
				<view
					v-else
					class="more main-flex">
					<uni-load-more :status="status" />
				</view>
		</view>
		<!--商品弹窗-->
		<goods-popup
		@close="closeGoods"
		:showGoods="showGoods"
		:goods="goodsInfo"></goods-popup>
		
		<!-- #ifdef MP-WEIXIN -->
		<uu-privacy manual id="uu-privacy" appName="测试" />
		<!-- #endif -->
		
	</view>
</template>

<script setup>
import useSetStore from '@/store/modules/set'
import {
	allProvince,
	indexBanner,
	notice,
	indexLabel } from "@/api/app_api/index"
import { product } from "@/api/app_api/product"
import { getNode } from '@/utils/ty.js';
import { getCurrentInstance, ref, watch, watchEffect } from 'vue';
import { onShow, onReady, onLoad, onReachBottom, onPullDownRefresh, onShareAppMessage } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user';
import { share } from '@/utils/config'
import { getMpLogin } from '@/utils/login.js'
	
	
	// 微信小程序配置：禁用样式隔离
	defineOptions({
	  options: {
	    styleIsolation: 'shared' // 关键配置
	  }
	})
	
	const userStore = useUserStore()
	const setStore = useSetStore()
	
	// 页面设置
	const windowHeight = ref(0)
	const pageHeight = ref(0)
	const paddingTop = ref(0)
	const instance = getCurrentInstance()
	const init = async () => {
		// #ifdef MP-WEIXIN
		const height = uni.getWindowInfo().windowHeight
		// #endif
		// #ifndef MP-WEIXIN
		const height = uni.getSystemInfoSync().windowHeight
		// #endif
		const query = uni.createSelectorQuery()
		const node = await getNode(query, '#header')
		paddingTop.value = node?.height || 0
		windowHeight.value = height
		pageHeight.value = height - node.height
	}
	
	// 切换模式
	const changeMode = (mode) => {
		userStore.changeMode(mode)
	}
	
	// 获取轮播图
	const bannerList = ref([])
	const getBanner = () => {
		indexBanner().then(res => {
			bannerList.value = res?.data || []
		})
	}
	// 点击轮播图
	const clickBanner = (item) => {
		if (!getMpLogin()) {
			return false
		}
		if (item.url) {
			uni.navigateTo({
				url: item.url
			})
		}
	}
	
	// 查询通知
	const noticeData = ref({})
	const getNotice = () => {
		notice().then(res => {
			noticeData.value = res?.data || {}
		})
	}
	
	//查看通知
	const clickNotice = () => {
		uni.navigateTo({
			url: `/pages/notice/notice?id=${noticeData.value.noticeId}`
		})
	}
	
	// 商品查询
	const productList = ref([])
	const pageNum = ref(1)
	const pageSize = ref(12)
	const total = ref(0)
	const isLoading = ref(false)
	const status = ref('loading')
	const isNull = ref(false)
	
	const searchFirst = () => {
		pageNum.value = 1
		productList.value = []
		if (!userStore.regionCode) return false
		getList()
	}
	
	const getList = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			sellChannel: userStore.sellChannel,
			regionCode: userStore.regionCode,
			recommend: 1
		}
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		product(params).then(res => {
			productList.value = pageNum.value === 1 ? res.data || [] : productList.value.concat(res.data || [])
			status.value = res.data.length === pageSize.value ? 'loading' : 'no-more'
			total.value = res.allNumber
			isNull.value = res.allNumber === 0 && pageNum.value === 1
			isLoading.value = false
			// uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			// uni.hideLoading()
		})
	}
	
	// 监听
	watch(() => userStore.regionCode, (newVal, oldVal) => {
		searchFirst()
	})
	watch(() => userStore.sellChannel, (newVal, oldVal) => {
		searchFirst()
	})
	
	onReachBottom(() => {
		if(status.value == 'no-more') return false;
		pageNum.value += 1
		status.value = 'loading'
		getList()
	})
	
	// 选择商品
	const showGoods = ref(false)
	const goodsInfo = ref({})
	const chooseGoods = (item) => {
		showGoods.value = true
		goodsInfo.value = item
	}
	const closeGoods = () => {
		showGoods.value = false
		goodsInfo.value = {}
	}
	
	onLoad((option) => {
		// setStore.setSys()
		if (option.spreadCode) {
			setStore.spreadCode = option.spreadCode
		}
		if (option.isTc) {
			setStore.isTc = Number(option.isTc)
		}
		getBanner()
		getNotice()
		searchFirst()
	})
	
	onPullDownRefresh(() => {
		getBanner()
		getNotice()
		searchFirst()
		uni.stopPullDownRefresh()
	})
	
	onReady(() => {
		init()
	})
	onShow(() => {
		uni.setTabBarStyle({
			backgroundColor: setStore.env === 'test' ? '#2c9af1' : '#ffffff'
		})
	})
	// #ifdef MP-WEIXIN
	onShareAppMessage(() => {
		return {
			title: share.title,
			path: `/pages/index/index?spreadCode=${userStore.user.spreadCode}&isTc=${userStore.isTc}`,
			imageUrl: share.img
		}
	})
	// #endif

</script>

<style lang="scss">
	.wrapper {
	}
	.container {
		padding: 0 20rpx;
		.title {
			font-weight: 600;
		}
	}
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background: linear-gradient(to bottom, #e3230e, $bg-color) no-repeat; /* 蓝色渐变 */
		background-size: 100% 400rpx;
		z-index: 10;
	}
	.banner {
		width: 100%;
		height: 320rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.swiper {
			width: 100%;
			height: 320rpx;
			&-item {
				width: 100%;
				height: 100%;
				&-img {
					width: 100%;
					height: 100%;
				}
			}
			.uni-swiper-dot {
				width: 8px;
				height: 8px;
				transition: all .3s;
			}
			.uni-swiper-dot-active {
				width: 16px !important;
				border-radius: 4px !important;
			}
		}
	}
	.notice {
		margin-top: 20rpx;
		:deep(.uni-noticebar) {
			padding: 5px 10px;
			margin: 0;
			border-radius: 10rpx;
		}
		:deep(.uni-noticebar-icon) {
			color: #e3230e !important;
		}
	}
	.mode {
		justify-content: space-between;
		margin-top: 20rpx;
		&-item {
			width: 345rpx;
			text-align: center;
			background-color: #ffffff;
			padding: 20rpx 0;
			border-radius: 10rpx;
			&-icon {
				&-img {
					width: 64rpx;
					height: 64rpx;
				}
			}
			&-name {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 10rpx;
			}
		}
	}
	.goods {
		margin-top: 20rpx;
		.goods-box + .goods-box {
			margin-top: 20rpx;
		}
	}
	:deep(.u-column) {
		&:not(:first-child) {
				margin-left: 20rpx !important;
		}
	}
</style>
